body {
    margin: auto; /* center in viewport */
    width: 100%;
}

div {
    transition:width 2s, height 2s, background-color 2s;
    /* border: 1px solid green; */
}

* { box-sizing:border-box }

ul.little-menu {
    padding: 0px;
}


ul.little-menu li {
    background-color: #eee;
    padding: 10px;
    margin: 1px;
    list-style-type: none;
}

.little-panel {
    padding: 5px;
}

/* width-sensitive panel width by media query */
@media only screen and ( min-width: 1101px ) {
                
    .little-panel {
        width: 25%;
    }
}

@media only screen and ( max-width: 1100px ) {
    .little-panel {
        width: 30%;
    }
}

@media only screen and ( max-width: 800px ) {
    .little-panel {
        width: 50%;
    }
}

@media only screen and ( max-width:500px ) {
    .little-panel {
        width: 100%;
    }
}
